<!--
  ~ /**
  ~  *                             _ooOoo_
  ~  *                            o8888888o
  ~  *                            88" . "88
  ~  *                            (| -_- |)
  ~  *                            O\  =  /O
  ~  *                         ____/`---'\____
  ~  *                       .'  \\|     |//  `.
  ~  *                      /  \\|||  :  |||//  \
  ~  *                     /  _||||| -:- |||||-  \
  ~  *                     |   | \\\  -  /// |   |
  ~  *                     | \_|  ''\---/''  |   |
  ~  *                     \  .-\__  `-`  ___/-. /
  ~  *                   ___`. .'  /--.--\  `. . __
  ~  *                ."" '<  `.___\_<|>_/___.'  >'"".
  ~  *               | | :  `- \`.;`\ _ /`;.`/ - ` : | |
  ~  *               \  \ `-.   \_ __\ /__ _/   .-` /  /
  ~  *          ======`-.____`-.___\_____/___.-`____.-'======
  ~  *                             `=---='
  ~  *          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ~  *                     佛祖保佑        永无BUG
  ~  *            佛曰:
  ~  *                   写字楼里写字间，写字间里程序员；
  ~  *                   程序人员写程序，又拿程序换酒钱。
  ~  *                   酒醒只在网上坐，酒醉还来网下眠；
  ~  *                   酒醉酒醒日复日，网上网下年复年。
  ~  *                   但愿老死电脑间，不愿鞠躬老板前；
  ~  *                   奔驰宝马贵者趣，公交自行程序员。
  ~  *                   别人笑我忒疯癫，我笑自己命太贱；
  ~  *                   不见满街漂亮妹，哪个归得程序员？
  ~ */
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="/layui-v2.5.7/layui/css/layui.css">
</head>
<body>

<!--面包屑-->
<span class="layui-breadcrumb">
      <a href="">主页</a>
      <a href="">用户管理</a>
      <a><cite>用户列表</cite></a>
</span>
<!--分割线-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>用户列表</legend>
</fieldset>

<div class="layui-fluid">
    <table id="userTab" lay-filter="userFilter"></table>
</div>

<!--编辑对话框-->
<form class="layui-form" style="display: none;margin-top:20px" id="editDialog" lay-filter="editDialog">
    <div class="layui-form-item">
        <label for="uname" class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="uname" id="uname" value="10" style="border: 0" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="password" class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input type="text" name="password" id="password" class="layui-input" placeholder="请输入部门名">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="utel" class="layui-form-label">用户电话号码</label>
        <div class="layui-input-inline">
            <input type="text" name="utel" id="utel" class="layui-input" placeholder="请输入电话号码">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="sex" class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <input type="radio" name="sex"  id="sex" value="男" title="男" checked>
            <input type="radio" name="sex"  value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="usalt" class="layui-form-label">盐值</label>
        <div class="layui-input-inline">
            <input type="text" name="usalt" id="usalt" value="10" style="border: 0" class="layui-input" readonly>
        </div>
    </div>
</form>

<!--自定义模板(表格头部工具栏)-->
<script type="text/html" id="headTools">
        <button class="layui-btn layui-btn-danger" lay-event="delAll">
            <span class="layui-icon layui-icon-delete"></span>
            批量删除
        </button>
    </div>
</script>


<!--自定义模板（表格行的工具栏）-->
<script type="text/html" id="itemTools">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-normal layui-btn-sm" href="javascript:;" lay-event="details">
            <span class="layui-icon layui-icon-tips"></span>详情
        </a>
        <a class="layui-btn layui-btn-warm layui-btn-sm" href="javascript:;" lay-event="edit">
            <span class="layui-icon layui-icon-edit"></span>编辑
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" href="javascript:;" lay-event="del">
            <span class="layui-icon layui-icon-delete"></span>删除
        </a>
    </div>
</script>

<script src="/layui-v2.5.7/layui/layui.js"></script>
<script>
    layui.use(['element','table','layer','jquery','form'],function () {
        var ele = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        //表格模块渲染数据
        table.render({
            elem:'#userTab', //需要展示数据的表格id
            url:'/user/list', //服务端数据地址
            cols:[[     //数据项
                {type:'checkbox',fixed:'left',width:80},
                {type:'numbers',title:'序号',width:80},
                {field:'uid',title:'用户id'},
                {field:'uname',title:'用户名',width:80,sort:true},
                {field:'password',title:'用户密码'},
                {field:'utel',title:'用户电话号码'},
                {field:'sex',title:'性别'},
                {field:'usalt',title:'盐值'},
                {title:'操作',fixed:'right',width:300,toolbar:'#itemTools',align:'center'}
            ]],
            page:true,   //显示分页效果
            limit:10,    //设置默认的每页大小数
            limits:[10,15,20],  //设置每页条数的限制数
            toolbar:true,   //开启表格头部工具条
            defaultToolbar: ['exports','filter', 'print'],  //设置工具条默认的按钮（筛选，打印，导出）
            toolbar:'#headTools'
        })
    })
</script>
</body>
</html>